<template>
  <el-row class="searchFactory">
    <div style="padding-top: 10px">设备名称</div>
    <el-input class="factoryInput" v-model="searchName"></el-input>
    <el-button class="searchBtn" @click="search()">查询</el-button>
    <el-button class="resetBtn" @click="reset()">重置</el-button>
    <el-button class="addBtn" type="warning" @click="createEquip()"
      >+新建</el-button
    >
    <el-button class="rentBtn" type="warning" @click="rentEquipClick()"
      >+租用设备</el-button
    >
  </el-row>
  <el-row class="formCard">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="序号" width="50">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备编号" width="180">
        <template #default="scope">
          <span>{{ scope.row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备名称" width="180">
        <template #default="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备类别" width="140">
        <template #default="scope">
          <span>{{ scope.row.type }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备描述" width="250">
        <template #default="scope">
          <span>{{ scope.row.detail }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备状态" width="150">
        <template #default="scope">
          <span>{{ scope.row.equipState }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备来源" width="150">
        <template #default="scope">
          <span>{{ scope.row.source }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属工厂" width="150">
        <template #default="scope">
          <span>{{ scope.row.factory }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="mini" @click="editClick(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
          <el-button
            size="mini"
            @click="openEquip(scope.row)"
            v-show="scope.row.equipState == '已关闭'"
            type="success"
            >远程开机</el-button
          >
          <el-button
            size="mini"
            @click="closeEquip(scope.row)"
            v-show="scope.row.equipState == '闲置中'"
            type="info"
          >
            <span style="color: white">远程关机</span>
          </el-button>
          <el-button size="mini" type="primary" @click="addPro(scope.row)">
            <span style="color: white">配置产品</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-row>

  <!-- 新建设备弹窗 -->
  <el-dialog title="新增设备" v-model="newEquipFormVisible">
    <el-form :model="newEquip">
      <el-form-item label="设备名称" :label-width="formLabelWidth">
        <el-input v-model="newEquip.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备描述" :label-width="formLabelWidth">
        <el-input v-model="newEquip.detail" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备类别" :label-width="formLabelWidth">
        <el-select v-model="newEquip.type">
          <el-option
            v-for="item in types"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="newEquipFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="newEquipConfirm()">确 定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 更改设备信息弹窗 -->
  <el-dialog title="更改设备信息" v-model="dialogFormVisible">
    <el-form :model="selectEquip">
      <el-form-item label="设备编号" :label-width="formLabelWidth">
        <el-input v-model="selectEquip.code" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备名称" :label-width="formLabelWidth">
        <el-input v-model="selectEquip.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备描述" :label-width="formLabelWidth">
        <el-input v-model="selectEquip.detail" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="设备类别" :label-width="formLabelWidth">
        <el-select v-model="selectEquip.type">
          <el-option
            v-for="item in types"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmEdit()">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 添加产能弹窗 -->
  <el-dialog title="添加产品产能信息" v-model="efficiencyVisible">
    <el-row>
      <span>设备编号</span>
      <el-input v-model="selecEquip.code" :disabled="true"></el-input>
      <span>设备名称</span>
      <el-input v-model="selecEquip.name" :disabled="true"></el-input>
    </el-row>
    <el-row>
      <el-button
        type="success"
        @click="newEfficiency()"
        style="margin-bottom: 15px"
        >+添加产品</el-button
      >
    </el-row>
    <el-row>
      <el-col v-for="e in efficiency" :key="e.proName">
        <span>产品名称</span>
        <el-input v-model="e.name"></el-input>
        <span>产能</span>
        <el-input v-model="e.effiNum"></el-input>
      </el-col>
    </el-row>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="efficiencyVisible = false">取 消</el-button>
        <el-button type="primary" @click="efficiencyVisible = false"
          >确 定</el-button
        >
      </span>
    </template>
  </el-dialog>

  <!-- 租用设备弹窗 -->
  <el-dialog title="租用设备" v-model="rentTableVisible">
    <el-table :data="rentEquip">
      <el-table-column property="id" label="序号" width="150"></el-table-column>
      <el-table-column
        property="code"
        label="设备编号"
        width="150"
      ></el-table-column>
      <el-table-column
        property="name"
        label="设备名称"
        width="150"
      ></el-table-column>
      <el-table-column
        property="type"
        label="设备类型"
        width="150"
      ></el-table-column>
      <el-table-column
        property="detail"
        label="设备描述"
        width="150"
      ></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="mini" @click="rentConfirm(scope.row)" type="success"
            >确认租用</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'
export default {
  name: 'equipManage',
  data() {
    return {
      tableData: [
        {
          id: '1',
          code: '123123',
          name: 'haha',
          detail: '',
          state: '已关闭',
          rentState: '',
          factory: '',
        },
      ],
      newTable: [],
      types: [],
      dialogFormVisible: false,
      formLabelWidth: '120px',
      efficiencyVisible: false,
      rentTableVisible: false,
      newEquipFormVisible: false,
      selectEquip: {},
      selectRent: {},
      searchName: '',
      newEquip: {},
      efficiency: [
        {
          name: '手机壳',
          effiNum: '200',
        },
        {
          name: '水杯',
          effiNum: '200',
        },
      ],
      rentEquip: [
        {
          id: '1',
          code: '123123',
          name: 'haha',
          detail: '',
          state: '已关闭',
        },
      ],
    }
  },
  mounted() {
    this.getEquip()
    this.getRent()
    this.getType()
  },
  methods: {
    getEquip() {
      axios
        .post('/equip/findAllEquip', this.$store.state.user)
        .then((res) => {
          console.log(res.data.data)
          this.tableData = res.data.data
        })
        .catch((err) => {
          console.error(err)
        })
    },
    getRent() {
      axios
        .get('/rent/getRentable')
        .then((res) => {
          console.log(res.data.data)
          this.rentEquip = res.data.data
        })
        .catch((err) => {
          console.error(err)
        })
    },
    getType() {
      axios
        .get('/equip/findAllType')
        .then((res) => {
          console.log('success')
          this.types = res.data.data
        })
        .catch((err) => {
          console.error('err')
        })
    },
    handleDelete(e) {
      this.selectEquip = e
      console.log(this.selectEquip)
      axios
        .post('/equip/deleteEquipMsg', this.selectEquip)
        .then((res) => {
          console.log(res)
          var m = res.data.message
          if (res.data.code == 200) {
            this.tableData.forEach(function (item, index, arr) {
              if (item == e) {
                arr.splice(index, 1)
              }
            })
            ElMessage.success({
              message: m,
              type: 'success',
            })
          } else {
            ElMessage.error(m)
          }
        })
        .catch((failResponse) => {
          console.log('fail msg')
          console.log(failResponse)
        })
    },
    editClick(e) {
      //只有回显作用
      this.dialogFormVisible = !this.dialogFormVisible
      this.selectEquip = e
    },
    saveEdit(e) {
      axios
        .post('/equip/modifyEquip', this.selectEquip)
        .then((res) => {
          console.log(res)
          if (res.data.code == 200) {
            console.log(success)
          }
        })
        .catch((failResponse) => {
          console.log('fail msg')
          console.log(failResponse)
        })
      this.dialogFormVisible = false
      ElMessage.success({
        message: '修改成功',
        type: 'success',
      })
    },
    addPro(e) {
      //添加产能
      this.efficiencyVisible = !this.efficiencyVisible
      this.selecEquip = e
    },
    newEfficiency() {
      //新建产能行
      this.efficiency.push({
        proName: '',
        effiNum: '',
      })
    },
    rentEquipClick() {
      this.rentTableVisible = !this.efficiencyVisible
    },
    createEquip() {
      this.newEquipFormVisible = true
    },
    rentConfirm(e) {
      this.selectRent = e
      console.log('selectRent' + this.selectRent)
      axios
        .post('/rent/confirmRent', {
          id: this.selectRent.id,
          code: this.selectRent.code,
          name: this.selectRent.name,
          type: this.selectRent.type,
          detail: this.selectRent.detail,
          factoryAccount: this.$store.state.user.account,
        })
        .then((res) => {
          console.log(res)
          this.tableData.push(res.data.data)
          ElMessage.success({
            message: '租用成功',
            type: 'success',
          })
        })
        .catch((failResponse) => {
          console.log('fail msg')
          console.log(failResponse)
        })
      this.rentTableVisible = false
      this.getEquip()
    },
    newEquipConfirm() {
      console.log(this.newEquip)
      axios
        .post('/equip/addEquip', {
          code: this.newEquip.code,
          name: this.newEquip.name,
          type: this.newEquip.type,
          detail: this.newEquip.detail,
          equipState: '已关闭',
          rentState: '未被租用',
          userAccount: this.$store.state.user.account,
          source: '自有设备',
        })
        .then((res) => {
          var m = res.data.message
          console.log(res.data.data)
          if (res.data.code == 200) {
            console.log(res.data.data)
            this.tableData.push(res.data.data)
            ElMessage.success({
              message: m,
              type: 'success',
            })
          } else {
            ElMessage.error(m)
          }
        })
        .catch((failResponse) => {
          console.log('fail msg')
          console.log(failResponse)
        })
      this.newEquipFormVisible = false
    },
    search() {
      this.newTable = this.tableData
      this.tableData = this.newTable.filter(
        (val) => val.name == this.searchName
      )
    },
    reset() {
      this.getEquip()
    },
    openEquip(e) {
      axios
        .post('/equip/openEquip', e)
        .then((res) => {
          var m = res.data.message
          console.log(res)
          if (res.data.code == 200) {
            ElMessage.success({
              message: m,
              type: 'success',
            })
            this.getEquip()
          }
        })
        .catch((failResponse) => {
          console.log('fail msg')
          console.log(failResponse)
        })
    },
    closeEquip(e) {
      axios
        .post('/equip/closeEquip', e)
        .then((res) => {
          var m = res.data.message
          console.log(res)
          if (res.data.code == 200) {
            ElMessage.success({
              message: m,
              type: 'success',
            })
            this.getEquip()
          }
        })
        .catch((failResponse) => {
          console.log('fail msg')
          console.log(failResponse)
        })
    },
  },
}
</script>

<style lang="less" scoped>
.el-input {
  width: 10rem;
  padding: 0 30px 30px 30px;
  font-size: 1.2em;
}
.el-button {
  height: 10px;
}
.addBtn {
  font-weight: bold;
}
.rentBtn {
  font-weight: bold;
}
</style>
